<template>
	<view v-if="store.state.app.PAGE_LOAD" class="my-page-loading">
		<u-toast ref="uToastRef"></u-toast>
	</view>
</template>

<script lang="ts" setup>
	import { ref, watch, nextTick } from 'vue';
	import { useStore } from 'vuex';
	
	const store = useStore();
	const uToastRef = ref(null);

	watch(() => store.state.app.PAGE_LOAD, (loading: boolean) => {
		if (loading) {
			nextTick(() => {
				uToastRef.value.show({
					type: 'loading',
					message: '加载中...',
					duration: 60000,
					complete() {
						store.commit('SET_PAGE_LOAD', false);
					},
				})
			})
		}
	});
</script>

<style lang="scss" scoped>
	.my-page-loading {
		background-color: rgba(000, 000, 000, 0.5);
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		z-index: 1000;
	}
</style>